<template>
  <div class="home">
    <div class="header">
      <!-- 路由跳转并且传递参数 -->
      <div
        class="address_map"
        @click="$router.push({ name: 'address', params: { city } })"
      >
        <i class="fa fa-map-marker"></i>
        <span>{{ address }}</span>
        <i class="fa fa-sort-desc"></i>
      </div>
    </div>
    <div
      class="search_wrap"
      :class="{ fixedview: showFilter }"
      @click="$router.push('/search')"
    >
      <div class="shop_search">
        <i class="fa fa-search"></i>
        搜索商家 商家名称
      </div>
    </div>
    <div id="container">
      <!-- 轮播图 -->
      <mt-swipe :auto="4000" class="swiper">
        <mt-swipe-item v-for="image in swiperImgs" :key="image">
          <img :src="image" alt />
        </mt-swipe-item>
      </mt-swipe>
      <!-- 手动轮播 -->
      <mt-swipe :auto="0" class="entries">
        <mt-swipe-item
          v-for="(entry, i) in entries"
          :key="i"
          class="entry_wrap"
        >
          <div class="foodentry" v-for="item in entry" :key="item.image">
            <div class="img_wrap">
              <img :src="item.image" alt />
            </div>
            <span>{{ item.name }}</span>
          </div>
        </mt-swipe-item>
      </mt-swipe>
    </div>
    <div class="shoplist-title">推荐商家</div>

    <!-- 导航 -->
    <filter-view
      :filterData="filtersData"
      @searchFixed="showFilterView"
      @update="update"
    />

    <!-- 商家信息 -->
    <mt-loadmore
      :top-method="loadTop"
      :bottom-method="loadBottom"
      :bottom-all-loaded="allLoaded"
      :auto-fill="false"
      :bottomPullText="bottomPullText"
      ref="loadmore"
    >
      <div class="shoplist">
        <index-shop
          v-for="(item, index) in restaurants"
          :key="index"
          :restaurant="item.restaurant"
        />
      </div>
    </mt-loadmore>
  </div>
</template>

<script>
import { Swipe, SwipeItem, Loadmore } from "mint-ui";
import FilterView from "../components/FilterView";
import IndexShop from "../components/IndexShop";
export default {
  name: "home",

  data() {
    return {
      swiperImgs: [], // 轮播图1
      entries: [], // 轮播图2
      filtersData: null, // 筛选数据
      showFilter: false, // 搜索框是否置顶
      page: 1, // 页数
      size: 5, // 条数
      restaurants: [], // 存放商家信息
      allLoaded: false,
      bottomPullText: "下拉你会看到更多哦(*^__^*)", // 上拉刷新的文字内容
      conditionData: null, // 筛选的条件，是后端操作的，只需要将这个数据传入到请求中即可。
    };
  },

  components: {
    FilterView,
    IndexShop,
  },

  methods: {
    getData() {
      // 轮播图数据
      this.$axios("/api/profile/shopping")
        .then((res) => {
          // console.log(res);
          this.swiperImgs = res.data.swipeImgs;
          this.entries = res.data.entries;
        })
        .catch((err) => {
          console.log(err);
        });
      // 商品筛选数据
      this.$axios("/api/profile/filter")
        .then((res) => {
          // console.log(res);
          this.filtersData = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
      // 获取商家信息
      this.loadTop();
    },
    // 商品下拉刷新
    loadTop() {
      this.page = 1;
      this.allLoaded = false;
      this.bottomPullText = "下拉你会看到更多哦(*^__^*)";
      // 获取商家信息 this.conditionData 表示筛选信息
      this.$axios
        .post(
          `/api/profile/restaurants/${this.page}/${this.size}`,
          this.conditionData
        )
        .then((res) => {
          // console.log(res);
          this.$refs.loadmore.onTopLoaded();
          this.restaurants = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 商品上拉加载
    loadBottom() {
      if (!this.allLoaded) {
        // 只有在还有数据的时候才能执行加载更多
        this.page++;
        this.$axios
          .post(`/api/profile/restaurants/${this.page}/${this.size}`)
          .then((res) => {
            // 加载完了之后重新渲染
            this.$refs.loadmore.onBottomLoaded();
            if (res.data.length > 0) {
              // 说明还有数据可以继续请求
              res.data.forEach((item) => {
                // console.log(item);
                this.restaurants.push(item);
              });
              if (res.data.length < this.size) {
                // 没有数据了
                this.allLoaded = true;
                this.bottomPullText = "别划了，我也是有底线滴";
              }
            } else {
              // 没有数据了
              this.allLoaded = true;
              this.bottomPullText = "别划了，我也是有底线滴";
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    // 搜索框是否置顶
    showFilterView(isShow) {
      this.showFilter = isShow;
    },
    // 选出筛选条件
    update(condition) {
      // console.log(condition);
      // 本质上每次根据条件来进行筛选都是请求数据的一次过程
      this.conditionData = condition;
      this.loadTop();
    },
  },

  computed: {
    address() {
      return this.$store.getters.address;
    },
    city() {
      return (
        this.$store.getters.location.addressComponent.city ||
        this.$store.getters.location.addressComponent.province
      );
    },
  },

  created() {
    this.getData();
  },
};
</script>

<style scoped>
.home {
  width: 100%;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
}
.header,
.search_wrap {
  background-color: #009eef;
  padding: 10px 16px;
}
.header .address_map {
  color: #fff;
  font-weight: bold;
}
.address_map i {
  margin: 0 3px;
  font-size: 18px;
}
.address_map span {
  display: inline-block;
  width: 80%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.search_wrap .shop_search {
  /* margin-top: 10px; */
  background-color: #fff;
  padding: 10px 0;
  border-radius: 4px;
  text-align: center;
  color: #aaa;
}
.search_wrap {
  position: sticky;
  top: 0px;
  z-index: 9999;
  box-sizing: border-box;
}
.swiper {
  height: 100px;
}
.swiper img {
  width: 100%;
  height: 100px;
}
.entries {
  background: #fff;
  height: 47.2vw;
  text-align: center;
  overflow: hidden;
}
.foodentry {
  width: 20%;
  float: left;
  position: relative;
  margin-top: 2.933333vw;
}
.foodentry .img_wrap {
  position: relative;
  display: inline-block;
  width: 12vw;
  height: 12vw;
}
.img_wrap img {
  width: 100%;
  height: 100%;
}
.foodentry span {
  display: block;
  color: #666;
  font-size: 0.7rem;
}
/* 推荐商家 */
.shoplist-title {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  height: 9.6vw;
  line-height: 9.6vw;
  font-size: 16px;
  color: #333;
  background: #fff;
}
.shoplist-title::after,
.shoplist-title::before {
  display: block;
  content: "一";
  width: 5.333333vw;
  height: 0.266667vw;
  color: #999;
}
.shoplist-title:before {
  margin-right: 3.466667vw;
}
.shoplist-title:after {
  margin-left: 3.466667vw;
}

.fixedview {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 999;
}
.mint-loadmore {
  height: calc(100% - 95px);
  overflow: auto;
}
</style>